<template>
	<div style="height: 100%;">
		<div class="displayFlexBet" style="margin-bottom: 10px;">
			<div></div>
			<el-button @click="addData" icon="el-icon-plus" type="primary" size="mini">新增</el-button>
		</div>

		<div v-if="dataList && dataList[0] && dataList[0].length > 0" v-infinite-scroll="load">
			<div v-for="(secondData,index3) in dataList" :key="index3">
				<div v-for="(item,index) in secondData" :key="index" @click="editThis(item)"
					style="background: #fff;border-radius: 16px;margin-bottom: 10px;padding: 20px;">

					<div style="font-size: 16px;margin-bottom: 10px;">
						<span>{{item.defenceName}}</span>
						<span style="font-size: 12px;">（{{item.defenceNo}}）</span>
					</div>
					<el-row :gutter="20">
						<el-col :span="12">
							<div class="displayFlex" style="margin-bottom: 10px;">
								<div style="background: #f5f5f5;width: 28px;height: 28px;border-radius: 6px;">
									<img src="@/assets/sIcon1.png" style="width: 20px;height: 20px;margin: 4px;" />
								</div>
								<div style="margin-left: 10px;">主要规格参数指标</div>
							</div>
							<!-- <el-table :data="item.parameterList" border size="mini" stripe
								style="width: 100%;height: 215px;overflow-y: auto;border-radius: 8px;">
								<el-table-column type="index" width="50">
								</el-table-column>
								<el-table-column prop="parameterName" label="规格参数">
								</el-table-column>
								<el-table-column prop="designValueStr" label="数值" width="180">
								</el-table-column>
								<el-table-column prop="unitCode" label="单位" width="80">
								</el-table-column>
								<el-table-column prop="isInspect" label="是否巡检" align="center">
									<template slot-scope="scope">
										<el-tag v-if="scope.row.isInspect" type="success" size="mini">巡检</el-tag>
										<el-tag v-else type="danger" size="mini">不巡检</el-tag>
									</template>
								</el-table-column>
							</el-table> -->
						</el-col>

						<el-col :span="12" v-if="item.materialList">
							<div class="displayFlex" style="margin-bottom: 10px;">
								<div style="background: #f5f5f5;width: 28px;height: 28px;border-radius: 6px;">
									<img src="@/assets/sIcon4.png" style="width: 20px;height: 20px;margin: 4px;" />
								</div>
								<div style="margin-left: 10px;">
									<span>原辅料</span>
									<span style="font-size: 10px;">({{item.materialList.length}})</span>
								</div>
							</div>

							<!-- <el-table :data="item.materialList" border size="mini" stripe
								style="width: 100%;height: 215px;overflow-y: auto;border-radius: 8px;">
								<el-table-column type="index" width="50">
								</el-table-column>
								<el-table-column prop="materialName" label="原辅料">
								</el-table-column>
								<el-table-column prop="unitCode" label="单位" width="80">
								</el-table-column>
								<el-table-column prop="busiStatus" label="状态" align="center">
									<template slot-scope="scope">
										<el-tag v-if="scope.row.busiStatus !='NOT_USE'" type="success" size="mini">启用</el-tag>
										<el-tag v-else type="danger" size="mini">停用</el-tag>
									</template>
								</el-table-column>
							</el-table> -->
						</el-col>

					</el-row>
				</div>
			</div>
		</div>

		<div v-else style="background: #fff;border-radius: 16px;">
			<el-empty description="暂无内容"></el-empty>
		</div>


		<gasDefenceManage ref="gasDefenceManage" @success="getDataList(false)" @close="getDataList(false)"></gasDefenceManage>
	</div>
</template>

<script>
	import gasDefenceManage from '@/components/wasteGas/gasDefenceManage'
	let that
	import VueQr from 'vue-qr'
	export default {
		props: ['outletId'],
		components: {
			VueQr,
			gasDefenceManage
		},
		data() {
			return {
				dataList: [],
				params: {
					ticketId: '',
				},
				visible1: false,
				visible2: false,
				visible3: false,
				activeName: 'one',
				form: {
					defenceNo: ''
				},
				parameter: {
					list: []
				},
				production: {
					relationList: []
				},
				material: {
					materialType: '',
					ingredientList: []
				},
				xunjian: {
					show: false,
					params: {
						defenceId: '', // 防治设施id
						inspectItemName: '', // 巡检项名称
						valueType: 'NUMBER', // 记录值类型
					}
				},
				rules2: {
					inspectItemName: [{
						required: true,
						message: '巡检项信息',
						trigger: 'blur'
					}]
				},
				formRules: {
					defenceName: [{
						required: true,
						message: '防治设施设备名称',
						trigger: 'blur'
					}],
					defenceType: [{
						required: true,
						message: '防治设施类型',
						trigger: 'blur'
					}],
					defenceNo: [{
						required: true,
						message: '防治设施编号',
						trigger: 'blur'
					}],
					defenceModel: [{
						required: true,
						message: '防治设施型号',
						trigger: 'blur'
					}],
					// technologyId: [{
					// 	required: true,
					// 	message: '生产项目',
					// 	trigger: 'blur'
					// }]
				},

				formRules2: {
					productType: [{
						required: true,
						message: '产品类型',
						trigger: 'blur'
					}],
					productName: [{
						required: true,
						message: '产品名称',
						trigger: 'blur'
					}],
					unitCode: [{
						required: true,
						message: '防治设施型号',
						trigger: 'blur'
					}],
					maxProductionQty: [{
						required: true,
						message: '防治设施生产能力',
						trigger: 'blur'
					}]
				},

				formRules3: {
					materialName: [{
						required: true,
						message: '名称',
						trigger: 'blur'
					}]
				},
				unitList: [],
				productList: [], //已添加的产品列表
				materialList: [], //原辅料列表
				materialChooseList: [],
				gasTechnologyList: [],
				inspectItemList: [], //巡检项
				pageIndex: 0,
				totalPage: 0,
				parameterTypelist: [{
					label: "普通",
					value: "COMMON"
				}, {
					label: "高度",
					value: "HEIGHT"
				}, {
					label: "烟气",
					value: "SMOKE"
				}, {
					label: "温度",
					value: "TEMPERATURE"
				}, {
					label: "压力",
					value: "PRESSURE"
				}, {
					label: "耗电量",
					value: "ELECTRICITY"
				}, {
					label: "排放时间",
					value: "OUTLETTIME"
				}],
				defenceTypeList: [{
					label: "静电除尘",
					value: "PRECIPITATOR"
				}, {
					label: "催化燃烧",
					value: "CATALYTIC_COMBUSTION"
				}, {
					label: "喷淋塔",
					value: "SPRAY_TOWER"
				}, {
					label: "等离子净化",
					value: "PLASMA_PURIFICATION"
				}, {
					label: "光氧催化",
					value: "PHOTOCATALYTIC_OXIDATION"
				}, {
					label: "活性炭吸附",
					value: "CARBON_ADSORPTION"
				}, {
					label: "风机",
					value: "FAN"
				}, {
					label: "烟筒",
					value: "CHIMNEY"
				}, {
					label: "其他",
					value: "OTHER"
				}]
			}
		},

		mounted: function() {
			that = this
			that.params.ticketId = that.$store.state.token

			that.ajax({
				url: '/codeType/listCodeValue',
				data: {
					typeCode: 'UNIT_TYPE'
				},
				success: function(data) {
					if (data.status == 1) that.unitList = data.data;
				}
			});
			that.ajax({
				url: '/gasTechnology/getGasTechnologyList',
				data: {},
				success: function(data) {
					if (data.status == 1) that.gasTechnologyList = data.data;
					that.$forceUpdate()
				}
			});


			that.getDataList()
		},

		watch: {
			form(newValue, oldValue) {
				if (!newValue.isEdit) {
					if (newValue.defenceType && newValue.technologyId) {
						that.ajax({
							url: '/gasOutletDefence/getDefenceCode',
							data: {
								technologyId: newValue.technologyId, // 生产项目id
								defenceType: newValue.defenceType // 防治设施类型
							},
							success: function(data) {
								if (!that.form.defenceNo) that.form.defenceNo = data.data
								that.$forceUpdate()
							}
						});
					}
				}
			}
		},

		methods: {

			//保存巡检项
			saveXunJian() {
				if (!that.xunjian.params.inspectItemName) return that.$message.error("请填写完整")
				that.xunjian.params.defenceId = that.form.id
				that.ajax({
					url: '/gasOutlet/saveGasDefenceItem',
					data: JSON.stringify(that.xunjian.params),
					contentType: 'application/json',
					success: function(result) {
						if (result.data) {
							that.xunjian.show = false
							that.getProductionEquipmentBaseModelById()
						}
					},
				})
			},

			addData() {
				that.$refs.gasDefenceManage.addData()
			},

			deleteInspectItem(item) {
				this.$confirm('是否确定删除此巡检项?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					that.ajax({
						url: '/gasOutlet/deleteDefenceItemLogicById',
						data: {
							defenceItemId: item.id
						},
						contentType: 'application/x-www-form-urlencoded',
						success: function(result) {
							if (result.data) {
								that.getProductionEquipmentBaseModelById()
							}
						},
					})
				})
			},

			//删除生成设施
			deleteProductionEquipmentBase() {
				this.$confirm('是否确定删除此防治设施?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					that.ajax({
						url: '/gasOutlet/deleteGasOutletMaterial',
						data: {
							defenceId: that.form.id
						},
						contentType: 'application/x-www-form-urlencoded',
						success: function(result) {
							if (result.data) {
								that.visible1 = false
								that.getDataList()
							}
						},
					})
				})
			},

			//编辑
			editThis(item) {
				item.isEdit = true
				that.$refs.gasDefenceManage.editThis(item)
			},

			load() {
				if (that.totalPage >= that.pageIndex) return false
				that.pageIndex += 1
				that.getDataList()
			},

			addMaterial() {
				if (!that.form.id) {
					return that.$message({
						message: '请先填写基本设施信息',
						type: 'error'
					});
				}
				that.material = {
					materialType: '',
					ingredientList: []
				}
				that.visible3 = true
				that.material.defenceId = that.form.id

				that.ajax({
					url: '/entAuxiliaryMaterial/getEntAuxiliaryMaterialList',
					data: JSON.stringify({}),
					contentType: 'application/json',
					success: function(result) {
						that.materialChooseList = result.data
					},
				})
			},

			//添加有害元素
			addIngredientList() {
				that.material.ingredientList.push({
					ingredientName: '',
					percent: ''
				})
			},


			deleteIngredientList(index) {
				that.material.ingredientList.splice(index, 1)
			},

			//保存原辅料
			saveMaterial() {
				this.$refs['form3'].validate(function(valid) {
					if (valid) {
						that.ajax({
							url: 'gasOutlet/saveOrUpdateGasOutletMaterial',
							data: JSON.stringify(that.material),
							contentType: 'application/json',
							success: function(result) {
								if (result.data) {
									that.getProductionEquipmentBaseModelById()
									that.visible3 = false
									return that.$message({
										message: '保存成功！',
										type: 'success'
									});
								}
							},
						})
					}
				})
			},

			//删除原辅料
			deleteMaterial(item) {
				this.$confirm('是否确定删除此原辅料?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					that.ajax({
						url: '/gasOutlet/deleteGasOutletMaterial',
						data: {
							gasOutletMaterialId: item.id
						},
						contentType: 'application/x-www-form-urlencoded',
						success: function(result) {
							if (result.data) {
								that.getProductionEquipmentBaseModelById()
							}
						},
					})
				})
			},

			//获取基本信息
			getProductionEquipmentBaseModelById() {
				that.ajax({
					url: '/gasOutletDefence/getGasDefenceByDefenceId?ticketId=' +
						that.params.ticketId,
					data: {
						defenceId: that.form.id
					},
					contentType: 'application/x-www-form-urlencoded',
					success: function(result) {
						if (result.data) {
							that.productList = result.data.productList
							that.materialList = result.data.materialList
							that.inspectItemList = result.data.inspectItemList
						}
					},
				})
			},

			//新增规格参数
			addParameter() {
				that.parameter.list.push({
					parameterName: '', // 规格参数
					designValueType: 'EXACT_VALUE',
					minDesignValue: '',
					maxDesignValue: '',
					designValueStr: '',
					valueType: 'NUMBER',
					isInspect: true,
				})
			},

			//删除一个规格
			deleteParameter(index) {
				that.parameter.list.splice(index, 1)
			},

			//保存规格
			saveParameter(step) {
				if (!that.form.id) {
					return that.$message({
						message: '请先填写基本设施信息',
						type: 'error'
					});
				}

				if (that.parameter.list.length == 0) {
					return that.$message({
						message: '请填写设施规格参数',
						type: 'warning'
					});
				}

				that.ajax({
					url: '/gasOutlet/saveGasOutletParameterList?ticketId=' +
						that.params.ticketId,
					data: JSON.stringify({
						outletId: that.outletId,
						defenceId: that.form.id,
						parameterList: that.parameter.list
					}),
					contentType: 'application/json',
					success: function(result) {
						if (result.data) {
							if (step == 2) that.activeName = "three"
							return that.$message({
								message: '保存成功！',
								type: 'success'
							});
						}
					},
				})
			},

			handleClick(tab, event) {
				if (tab.name != "one") {
					if (!that.form.id) {
						that.activeName = "one"
						return that.$message({
							message: '请先完善设施信息',
							type: 'warning'
						});
					}
				}
			},

			saveInfo(step) {
				this.$refs['form'].validate(function(valid) {
					if (valid) {
						that.ajax({
							url: '/gasOutletDefence/saveGasDefence?ticketId=' +
								that.params.ticketId,
							data: JSON.stringify(Object.assign({
								outletId: that.outletId,
							}, that.form)),
							contentType: 'application/json',
							success: function(result) {
								if (result.data) that.form.id = result.data
								if (step == 2) that.activeName = "two"
								return that.$message({
									message: '保存成功！',
									type: 'success'
								});
							},
						})
					}
				})
			},

			getDataList(isShow = true) {
				that.ajax({
					url: '/gasOutletDefence/getGasDefenceListByOutletId',
					data: {
						//outletId: that.outletId,
					},
					contentType: 'application/x-www-form-urlencoded',
					success: function(result) {
						if (result.data) {
							that.dataList[that.pageIndex] = result.data
							that.totalPage = 1
							that.$forceUpdate()
							//console.log(that.dataList)
						}
					},
				}, isShow)
			},


		}
	}
</script>


<style scoped>
	.display_Flex_Bet {
		display: flex;
		justify-content: space-between;
	}
</style>